<template>
  <div>
    <span style="float: right; padding-right: 2px; margin-right: 2px">
      <ButtonCpt :selected="selected" :type="primary" :icon="iconAdd" :title="addTitle" :content="content"
                 :url="postUrl"
                 :method="postMethod" @refresh="refresh" @reset-post-content="resetPostContent">
        <slot name="add"></slot>
      </ButtonCpt>
      <ButtonCpt :selected="selected" :type="warning" :icon="iconEdit" :title="updateTitle" :content="content"
                 :url="updateUrl"
                 :method="updateMethod" @refresh="refresh" @echo="echo">
        <slot name="update"></slot>
      </ButtonCpt>
      <ButtonCpt :selected="selected" :type="danger" :icon="iconDelete" :title="deleteTitle" :content="content"
                 :url="deleteUrl"
                 :method="deleteMethod" @refresh="refresh">
        <slot name="delete"></slot>
      </ButtonCpt>
    </span>
    <el-table
      :data=this.data.contents
      stripe="true"
      size="mini"
      highlight-current-row="true"
      border
      style="width: 100%"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange"
    >

      <el-table-column
        type="selection"
        align="center"
        fixed
      >
      </el-table-column>

      <ul v-for="item in headItems">
        <el-table-column :prop=item.key :label=item.label>
        </el-table-column>
      </ul>

      <div slot="empty" style="height:200px;line-height: 200px;">

        <i class="el-icon-warning-outline"></i>暂无数据

      </div>


    </el-table>

    <span v-if=this.paged style="float: right">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      @prev-click="handleCurrentChange"
      @next-click="handleCurrentChange"
      :page-sizes="[10, 20, 50, 100]"
      layout="total, sizes, prev, pager, next, jumper"
      :total=this.data.total
      small="true">
    </el-pagination>
      </span>

  </div>
</template>

<script>

import ButtonCpt from './ButtonCpt'

export default {

  name: 'ListCpt',
  components: {ButtonCpt},
  props: {
    headItems: {
      type: Array,
      default: [
        {
          label: '姓名',
          key: 'name',
        },
      ],
    },
    data: {},
    paged: {
      type: Boolean,
      default: false,
    },
    url: 's',
    content: {},
    postUrl: '',
    updateUrl: '',
    deleteUrl: '',
  },
  data() {
    return {
      selected: [],
      primary: 'primary',
      warning: 'warning',
      danger: 'danger',
      iconAdd: 'el-icon-plus',
      iconEdit: 'el-icon-edit',
      iconDelete: 'el-icon-delete',
      addTitle: '添加',
      updateTitle: '修改',
      deleteTitle: '删除',
      postMethod: 'post',
      updateMethod: 'update',
      deleteMethod: 'delete',
    }
  },
  methods: {
    handleSelectionChange(val) {
      this.selected = val
    },

    handleSizeChange(val) {
      this.$emit('refreshPageSize', val)

    },
    handleCurrentChange(val) {
      console.log(val)
      this.$emit('refreshCurrentPage', val)
    },
    refresh() {
      this.$emit('refresh')
    },
    echo(data) {
      this.$emit('echo', data)
    },
    resetPostContent(){
      this.$emit('reset-post-content')
    }

  },

  watch: {
    dataSource:{
      immediate: true,
      handler(val){
        this.content = val
      }
    }
  }

}
</script>

<style scoped>
</style>
